<template>
	<view class="content">
		<!-- 页面背景 -->
		<view class="page_back"></view>
		<!--顶部导航-->
		<uni-nav-bar :statusBar="true" title="个人中心" backgroundColor="transparent" :border="false"></uni-nav-bar>
		<view class="user_box">
			<view class="user_img_box">
				<!-- <image class="user_img"> -->
					<open-data class="user_img" type="userAvatarUrl"></open-data>
				<!-- </image> -->
				
			</view>
		
			<view class="user_text_info_box">
				<view class="user_name">๑karen๑</view>
				<!-- <u-button type="primary" :plain="true" text="镂空" style="background-color: transparent;"></u-button> -->
				<!-- <button class="user_name" @click="getUserProfile">๑karen๑</button> -->
				<view class="user_phone">13531013644</view>
			</view>
		</view>
		
		<view class="user_button_box">
			<view class="user_button_left" @click="gotopage('chengzhangka')">
				<view class="user_b_l_img_box">
					<image class="user_b_l_img_box" src="../../static/img/own_fabacke.png"></image>
				</view>
		
				<view class="user_left_text_box">
					<view class="xin_text">成长卡</view>
					<view class="xin_text_bottom">兑换与激活</view>
				</view>
			</view>
		
			<view class="user_button_left" @click="gotopage('own_order')">
				<view class="user_b_l_img_box1">
					<image class="user_b_l_img_box1" src="../../static/img/own_order.png"></image>
				</view>
		
				<view class="user_left_text_box">
					<view class="xin_text">我的订单</view>
					<view class="xin_text_bottom">支付的订单</view>
				</view>
			</view>
		</view>
		
		<!-- 服务背景图 -->
		<view class="server_box">
			<view class="server_left_img_box">
				<image src="../../static/img/own_server1.png" class="own_server1_img"></image>
			</view>
			<view class="server_right_img_box">
				<image src="../../static/img/own_server2.png" class="own_server2_img"></image>
			</view>
		
			<view class="server_text_abso">
				<view class="display-flex">
					<view>
						<view class="server_box_absol">
							<view class="server_sheny_text">服务计划剩余天数59天</view>
						</view>
						<view class="process"></view>
						<view class="bb_text">已守护您的宝宝100天</view>
					</view>
		
					<view>
						<view class="button_xufei">
							续费
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="zhanwei"></view>
		
		
		<view class="own_tab" @click="gotopage('counp')">
			<view class="own_tab_l_box">
				<view class="tab_img_box">
					<image src="../../static/img/own_copu.png" class="tab_img"></image>
				</view>
				<view class="tab_txt">优惠卷</view>
			</view>
			
			<view class="tab_right">
				<image class="tab_right_img" src="../../static/img/own_next.png"></image>
			</view>
		</view>
		
		<view class="own_tab" @click="gotopage('address_list')">
			<view class="own_tab_l_box">
				<view class="tab_img_box">
					<image src="../../static/img/own_address.png" class="tab_img"></image>
				</view>
				<view class="tab_txt">收货地址</view>
			</view>
			
			<view class="tab_right">
				<image class="tab_right_img" src="../../static/img/own_next.png"></image>
			</view>
		</view>
		
		<view class="own_tab">
			<view class="own_tab_l_box">
				<view class="tab_img_box">
					<image src="../../static/img/own_kefu.png" class="tab_img"></image>
				</view>
				<view class="tab_txt">联系客服</view>
			</view>
			
			<view class="tab_right">
				<image class="tab_right_img" src="../../static/img/own_next.png"></image>
			</view>
		</view>
		
		<view class="own_tab">
			<view class="own_tab_l_box">
				<view class="tab_img_box">
					<image src="../../static/img/own_guanzhu.png" class="tab_img"></image>
				</view>
				<view class="tab_txt">关注公众号</view>
			</view>
			
			<view class="tab_right">
				<image class="tab_right_img" src="../../static/img/own_next.png"></image>
			</view>
		</view>
		
		<view class="own_tab">
			<view class="own_tab_l_box">
				<view class="tab_img_box">
					<image src="../../static/img/own_guanyuwom.png" class="tab_img"></image>
				</view>
				<view class="tab_txt">关于我们</view>
			</view>
			
			<view class="tab_right">
				<image class="tab_right_img" src="../../static/img/own_next.png"></image>
			</view>
		</view>
		
		<zn-tabbar @changeTabbar="changeTabbar" :value4="value4" :vipStatus="vipStatus"></zn-tabbar>
		
	</view>
</template>

<script>
	import HostConfig from '@/utils/host.js';
	import Host from '@/utils/api.js';
	export default {
		data() {
			return {
				value4:3,
				vipStatus: '',
			}
		},
		onLoad() {
			let that = this;
			// 判断用户是否为会员
			uni.login({
			  provider: 'weixin',
			  success: function (loginRes) {
				uni.request({
				    url: Host.ApiGetOpenid.url, //仅为示例，并非真实接口地址。
					method: 'GET',
				    data: {
				        code: loginRes.code,
				    },
				    success: (res) => {
						that.openid = res.data.openid;
						uni.request({
						    url: Host.ApiGetuserInfo.url, //仅为示例，并非真实接口地址。
							method: 'GET',
						    data: {
						        openid: that.openid,
						    },
						    success: (res) => {
								if(res.data.result == ""){
									console.log('普通会员');
									that.vipStatus = 1;//普通用户
								}else{
									that.vipStatus = 2;//会员
								}
						    }
						});
				    }
				});
			  }
			});
		},
		methods: {
			changeTabbar(e){
				this.value4 = e;
				console.log(e)
			},
			gotopage(param){
				if(param == "own_order"){
					uni.navigateTo({
						url: '/pages/order/own_order'
					});
				}
				if(param == "counp"){
					uni.navigateTo({
						url: '/pages/counp/counp'
					});
				}
				if(param == "chengzhangka"){
					uni.navigateTo({
						url:'/pages/chengzhangka/chengzhangka'
					})
				}
				if(param == "address_list"){
					uni.navigateTo({
						url:'/pages/address/address_list'
					})
				}
			}
		}
	}
	
</script>

<style>
	page{
		background-color: #F6F6F6;
	}
	.content{
		width: 100%;
		overflow-x: hidden;
	}
	.page_back{
		z-index: -100;
		background: linear-gradient(180deg, #6EC5FF 0%, rgba(167, 228, 255, 0) 100%);
		opacity: 0.11;
		width: 100%;
		height: 913upx;
		position: absolute;
	} 

	.user_box{
		margin: 20upx 26upx 0 28upx;
		display: flex;
	}
	
	.user_img_box{
		width: 148upx;
		height: 148upx;
		border-radius: 50%;
		border: 4upx solid #FFFFFF;
		box-sizing: content-box;
	}
	.user_img{
		width: 148upx;
		height: 148upx;
		border-radius: 50%;
		
	}
	.user_text_info_box{
		margin: 24upx 0 16upx 24upx;
	}
	
	.user_name{
		font-size: 36upx;
		font-family: Thonburi-Bold, Thonburi;
		font-weight: bold;
		color: #333333;
		line-height: 48upx;
	}
	
	.user_phone{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40upx;
		margin-top: 18upx;
	}
	
	.user_button_box{
		margin: 46upx 26upx 0upx 28upx;
		background: #FFFFFF;
		border-radius: 6upx;
		padding: 36upx 86upx 36upx 72upx;
		/* width: 696upx; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.user_b_l_img_box{
		width: 60upx;
		height: 60upx;
	}
	.user_b_l_img_box1{
		width: 60upx;
		height: 62upx;
	}
	.user_button_left{
		display: flex;
		align-items: center;
	}
	.user_left_text_box{
		/* display: flex; */
		margin-left: 16upx;
	}
	.xin_text{

		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 40upx;
	}
	.xin_text_bottom{

		font-size: 20upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 28upx;
	}
	
	.server_box{
		margin: 28upx 26upx 0upx 28upx;
		background-color: #32383B;
		width: 694upx;
		height: 217upx;
		position: relative;
		display: flex;
		justify-content: space-between;
		border-radius: 6upx;
	}
	.server_text_abso{
		position: absolute;
		top: 48upx;
		left: 54upx;
	}
	.server_box_absol{
		
	}
	.server_left_img_box{
		width: 210upx;
		height: 218upx;
	}
	.own_server1_img{
		width: 210upx;
		height: 218upx;
	}
	.server_right_img_box{
		width: 390upx;
		height: 218upx;
	}
	.own_server2_img{
		width: 390upx;
		height: 218upx;
	}
	.server_sheny_text{
		font-size: 36upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 50upx;
		background: linear-gradient(47deg, #FFD4AE 0%, #FFDEC4 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.process{
		margin-top: 18upx;
		width: 58upx;
		height: 8upx;
		background: linear-gradient(47deg, #FFD4AE 0%, rgba(255, 222, 196, 0) 100%);
	}
	.bb_text{
		margin-top: 12upx;

		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 34upx;
	}
	.display-flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 618upx;
	}
	.button_xufei{
		width: 182upx;
		line-height: 64upx;
		background: linear-gradient(47deg, #FFD4AE 0%, #FFDEC4 100%);
		border-radius: 32upx;
		text-align: center;
	}
	
	.own_tab{
		/* background: #007AFF; */
		display: flex;
		justify-content: space-between;
		width: 678upx;
		height: 85upx;
		margin: 0 30upx 0 42upx;
		align-items: center;
	}
	
	.own_tab_l_box{
		display: flex;
	}
	.tab_img_box{
		width: 40upx;
		height: 40upx;
	}
	.tab_img{
		width: 40upx;
		height: 40upx;
	}
	.tab_txt{
		margin-left: 24upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}
	.tab_right{
		width: 32upx;
		height: 32upx;
	}
	.tab_right_img{
		width: 32upx;
		height: 32upx;
	}
	.zhanwei{
		margin-top: 25upx;
	}
</style>
